{% for message in messages %}
    <div {% if message.tags %} class="{{ message.tags }}" {% endif %} id="messages"
                               role="alert">
        <span class="block sm:inline mx-6">{{ message }}</span>
        <span id="button-msg" class="absolute top-0 bottom-0 right-0 px-4 py-3 ml-10">
        <svg v-on:click="hideMessages" class="fill-current h-6 w-6" role="button" xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20">
            <title>Close</title>
            <path
                d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"></path>
        </svg>
    </span>
    </div>
{% endfor %}

<script>
    let messages = document.getElementById("messages")
    let button = document.getElementById("button-msg")

    button.addEventListener('click', event => {
        messages.style.display = "none";
    });

    setTimeout(() => {
        messages.style.display = "none";
    }, 5000);
</script>